<!-- 排名组件  -->
<template>
  <div class="rankContainer" v-if="topRank.length > 0">
    <div class="rankContainerTrophy top2" @click="handleTop(1)">
      <img alt="" src="@/assets/images/top2.png" />
      <span class="rankName">TOP2</span>
      <span class="companyName">{{ topRank[1].institutionName }}</span>
      <div class="score">{{ topRank[1].examineScore }}{{ unit }}</div>
    </div>
    <div class="rankContainerTrophy top1" @click="handleTop(0)">
      <img alt="" src="@/assets/images/top1.png" />
      <span class="rankName">TOP1</span>
      <span class="companyName">{{ topRank[0].institutionName }}</span>
      <div class="score">{{ topRank[0].examineScore }}{{ unit }}</div>
    </div>
    <div class="rankContainerTrophy top3" @click="handleTop(2)">
      <img alt="" src="@/assets/images/top3.png" />
      <span class="rankName">TOP3</span>
      <span class="companyName">{{ topRank[2].institutionName }}</span>
      <div class="score">{{ topRank[2].examineScore }}{{ unit }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    topRank: {
      type: Array,
      default: () => []
    },
    unit: {
      type: String,
      default: () => '分'
    },
    selectedDimension: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    handleTop(top) {
      if(this.selectedDimension.root){
         this.$router.push(`/performanceRank?institutionId=${this.topRank[top].institutionValue}&dimensionId=${this.selectedDimension.dimensionId}`)
           try {
          this.openPerformanceBPageForSensor({
            'institutionName': this.topRank[top].institutionName
          })
        } catch (err) {
          console.log('打开综合考核评分B类页面：', err)
        }
      }else {
         this.$router.push(`/performanceDetails?dimensionId=${this.selectedDimension.dimensionId}&institutionValue=${this.topRank[top].institutionValue}`)
          try {
          this.openPerformanceCPageForSensor({
            'institutionName':  this.topRank[top].institutionName,
            'dimensionName': this.selectedDimension.dimensionName
          })
        } catch (err) {
          console.log('打开综合考核评分C类页面：', err)
        }
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.rankContainer {
  display: flex;
  justify-content: center;
  align-items: baseline;
  overflow: hidden;
  height: 180px;
  .rankContainerTrophy {
    position: relative;
    text-align: center;
    width: 110px;
    height: 190px;
    margin-right: 8px;
    img {
      width: 100%;
    }
  }
  .top1 {
    .rankName {
      color: #f8c22a;
      font-size: 18px;
      position: absolute;
      top: 80px;
      left: 32%;
      font-weight: 600;
    }
    .companyName {
      font-size: 16px;
      position: relative;
      top: -80px;
      left: 0;
    }
    .score {
      font-size: 14px;
      color: #979aa4;
      position: relative;
      top: -78px;
      left: 0;
    }
  }
  .top2 {
    .rankName {
      color: #d16a5b;
      font-size: 14px;
      position: absolute;
      top: 64px;
      left: 31%;
    }
    .companyName {
      font-size: 14px;
      position: relative;
      top: -70px;
      left: 0;
    }
    .score {
      font-size: 14px;
      color: #979aa4;
      position: relative;
      top: -68px;
      left: 0;
    }
  }
  .top3 {
    .rankName {
      color: #7c8fff;
      font-size: 14px;
      position: absolute;
      top: 64px;
      left: 32%;
    }
    .companyName {
      font-size: 14px;
      position: relative;
      top: -70px;
      left: 0;
    }
    .score {
      font-size: 14px;
      color: #979aa4;
      position: relative;
      top: -68px;
      left: 0;
    }
  }
}
</style>
